.o_base_settings {
   height: 100%;
   overflow: auto;
}

.o_setting_container {
   height: 100%;
   > * {
      overflow: auto;
      flex: 1 0 auto;
   }
}

.o_setting_box {
   margin-bottom: 8px;
   margin-top: 8px;
   position: relative;
}

.o_setting_left_pane {
   width: 24px;
   float: left;
}

.o_setting_right_pane {
   margin-left: 24px;
   border-left: 1px solid $border-color;
   padding-left: 12px;

   .o_input_dropdown > .o_input {
      width: 100%;
   }

   .o_field_widget:not(.o_field_boolean) {
      @include media-breakpoint-up(md) {
         width: 50%;
      }
      flex: 0 0 auto;

      &.o_field_many2manytags > .o_field_widget {
         flex: 1 0 50px;
      }
   }

   button.btn-link:first-child {
      padding: 0;
   }

   a.oe-link {
      font-size: 12px;
   }
}

.o_enterprise_label {
   position: absolute;
   top: 0px;
   right: 40px;
}

// MIXINS
@mixin o-base-settings-horizontal-padding($padding-base: $input-btn-padding-y-sm) {
   padding: $padding-base $o-horizontal-padding;

   @include media-breakpoint-up(xl) {
       padding-left: $o-horizontal-padding*2;;
   }
}

// Use a very specif selector to overwrite generic form-view rules
.o_form_view.o_form_nosheet.o_base_settings {
   display: flex;
   flex-flow: column nowrap;
   padding: 0px;
}

// BASE SETTINGS LAYOUT
.o_base_settings {
   --settings__tab-bg: #{map-get($grays, '900')};
   --settings__tab-bg--active: #{map-get($grays, '800')};
   --settings__tab-color: #{map-get($grays, '400')};
   --settings__title-bg: #{map-get($grays, '200')};

   height: 100%;

   .o_control_panel {
       flex: 0 0 auto;

       .o_panel {
           display: flex;
           flex-flow: row wrap;
           width: 100%;
       }

       .o_form_statusbar {
           padding: 0;
           margin: 0;
           border: 0;
       }
   }

   .o_setting_container {
       display: flex;
       flex: 1 1 auto;
       overflow: auto;

       .settings_tab {
           display: flex;
           flex: 0 0 auto;
           flex-flow: column nowrap;
           background: var(--settings__tab-bg);
           overflow: auto;

           .selected {
               background-color: var(--settings__tab-bg--active);
               box-shadow: inset 2px 0 0 $o-brand-primary;
           }

           .tab {
               display: flex;
               padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding;
               height: 40px;
               color: var(--settings__tab-color);
               font-size: 13px;
               line-height: 40px;
               cursor: pointer;
               white-space: nowrap;

               .icon {
                   width: 23px;
                   min-width: 23px;
                   margin-right: 10px;
               }

               &:hover, &.selected {
                   color: white;
               }
           }
       }

       .settings {
           position: relative;
           flex: 1 1 100%;
           background-color: $o-view-background-color;
           overflow: auto;

           > .app_settings_block {
               h2 {
                   margin: 0 0 !important;
                   @include o-base-settings-horizontal-padding(.4rem);
                   background-color: var(--settings__title-bg);
                   font-size: 15px;

                   &.o_invisible_modifier + .o_settings_container {
                       display: none;
                   }
               }

               h3 {
                   margin: 0 0 !important;
                   @include o-base-settings-horizontal-padding(.4rem);
                   font-weight: 400;
                   font-size: 13px;
               }

               .o_settings_container {
                   max-width: map-get($grid-breakpoints, lg); // Provide a maximum container size to ensure readability
                   @include media-breakpoint-up(md) {
                        @include o-base-settings-horizontal-padding(0);
                   }
                   margin-bottom: 24px;

                   .o_form_label + .fa, .o_form_label + .o_doc_link {
                        margin-left: map-get($spacers, 2);
                   }
               }
           }

           .settingSearchHeader {
               display: flex;
               align-items: center;
               margin-bottom: 10px;
               @include o-base-settings-horizontal-padding(.8rem);
               background-color: map-get($grays, '200');

               .icon {
                   width: 1.4em;
                   height: 1.4em;
                   margin-right: 10px;
               }

               & + .app_settings_header {
                   margin-top: -10px;
               }
           }

           .app_settings_header {
               @include o-base-settings-horizontal-padding(0);

               @include media-breakpoint-down(md) {
                  .content-group .flex-nowrap {
                     flex-wrap: wrap !important;
                  }
               }
           }

           .highlighter {
               background: yellow;
           }
       }

       .d-block {
           display: block!important;
       }
   }
}
